<template>
  <div>
    <div class="spanSty">
      <span>国家基本公共卫生服务项目产后访视表</span>
    </div>
    <el-form :model="form" label-width="140px" label-position="left">
      <el-divider content-position="left">编号</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCardNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访日期">
            <el-date-picker
              v-model="form.followUpDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="分娩日期">
            <el-date-picker
              v-model="form.delivery"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
			   value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="出院日期">
            <el-date-picker
              v-model="form.dischargeDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
			   value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="体温">
            <el-input v-model="form.bodyTemperature"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="一般健康状况">
            <el-input v-model="form.health"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="一般心理状况">
            <el-input v-model="form.psychologicalCondition"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="血压(mmHg)">
            <el-input
              v-model="form.bloodPressure"
              placeholder="收缩压"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="舒张压">
            <el-input
              v-model="form.diastolicPressure"
              placeholder="舒张压"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="乳房">
            <el-select v-model="form.breast" style="width: 100%">
              <el-option
                v-for="item in breast"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="恶露">
            <el-select v-model="form.lochia" style="width: 100%">
              <el-option
                v-for="item in breast"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(乳房)" v-if="[2].includes(form.breast)">
            <el-input v-model="form.breastContent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(恶露)" v-if="[2].includes(form.lochia)">
            <el-input v-model="form.lochiaContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="子宫">
            <el-select v-model="form.uterus" style="width: 100%">
              <el-option
                v-for="item in breast"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="伤口">
            <el-select v-model="form.wound" style="width: 100%">
              <el-option
                v-for="item in breast"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(子宫)" v-if="[2].includes(form.uterus)">
            <el-input v-model="form.uterusContent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(伤口)" v-if="[2].includes(form.wound)">
            <el-input v-model="form.woundContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="其他">
            <el-input v-model="form.other"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="分类">
            <el-select v-model="form.classification" style="width: 100%">
              <el-option
                v-for="item in breast"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="指导">
            <el-select
              v-model="form.guides"
              style="width: 100%"
              multiple
              @change="seChange1"
            >
              <el-option
                v-for="item in guidance"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item
            label="异常(分类)"
            v-if="[2].includes(form.classification)"
          >
            <el-input v-model="form.classificationContent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item
            label="其他(指导)"
            v-if="!(guidanceArr.indexOf(6) == -1)"
          >
            <el-input v-model="form.guidanceContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">转诊</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊有无">
            <el-select v-model="form.ifReferral" style="width: 100%">
              <el-option
                v-for="item in ifReferral"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="原因" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.referral.reason"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊机构" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.referral.department"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊科室" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.department"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊联系人" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.referral.contactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item
            label="转诊联系方式"
            v-if="[1].includes(form.ifReferral)"
          >
            <el-input v-model="form.referral.contactPhoneNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="结果">
            <el-select v-model="form.referral.conclusion" style="width: 100%">
              <el-option
                v-for="item in result"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="下次随访日期">
            <el-date-picker
              v-model="form.nextFollowupDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
			   value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生">
            <el-input v-model="form.followDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="居民签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove1"
              :on-change="onprogress1"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed1"
              :file-list="fileList1"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove2"
              :on-change="onprogress2"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed2"
              :file-list="fileList2"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
			<el-row type="flex" class="submitSty">
			  <HButton type="add" @click="submit">提交</HButton>
			</el-row>
    </el-form>
  </div>
</template>

<script>
import {
  breast,
  guidance,
  ifReferral,
  result,
} from "@/api/followForms/postpartumVisit";
import {add, postpartumAccess} from"@/api/formData"
export default {
  data() {
    return {
      form: {
        ifReferral: 1,
        "bloodPressure": "",
        "bodyTemperature": "",
        "breast": "",
        "idCardNo": '',
        "classification": "",
        "delivery": "",
        "discharge": "",
        "doctorSignature": "",
        "followUpDate": "",
        "guides": [],
        "health": "",
        "id": "",
        "lochia": "",
        "nextFollowupDate": "",
        "other": "",
        "psychologicalCondition": "",
        "referral": {
          "conclusion": "",
          "contactName": "",
          "contactPhoneNo": "",
          "department": "",
          "reason": ""
        },
        "serialNo": "",
        "signature": "",
        "uterus": "",
        "wound": ""
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      guidanceArr: [],
      breast: breast,
      guidance: guidance,
      ifReferral: ifReferral,
      result: result,
    };
  },
  created() {},
  methods: {
    submit() {
      console.log(this.form)

     // var json = 	JSON.stringify(this.form)
     // var data = {
     // 	"id":this.form.id,
     // 	"type":"CHFS",
     // 	"otherData":json
     // }
      postpartumAccess(this.form).then(res=>{
     	console.log(res)
        if (res.code == 'AA000000') {
          this.$message.success('提交成功')
        }
     })
    },
    //多选封装
    select(value, options) {
      if (!(value.indexOf(1) == -1)) {
        options.forEach((e) => {
          if (e.id != 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //指导选择
    seChange1(value) {
      this.form.guidance = this.guidanceArr.toString();
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress2(file, fileList) {
      this.fileList2 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed2() {
      this.$message.error("最多上传1个！");
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 30%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
</style>
